<script setup lang="ts">
import { getUserEmailConfigAPI, saveUserEmailConfigAPI } from '@/api/cacUser'
import { decryption, getImg, getRect, jump } from '@/utils/util'
import cmsEasyGuide from '@/views/subViews/components/cms-easy-guide/components/cms-easy-guide/cms-easy-guide.vue'

interface iFrom {
    username: string
    password: string
    host: string
    port: string
}

const form = reactive<iFrom>({
    username: '', // 用户名
    password: '', // 密码
    host: '', // 主机
    port: '' // 端口
})

const submit = async () => {
    // 校验

    const rules: iFrom = {
        username: '用户名不能为空',
        password: '密码不能为空',
        host: '主机不能为空',
        port: '端口不能为空'
    }

    for (const key in rules) {
        if (!form[key as keyof iFrom]) {
            uni.showToast({
                title: rules[key as keyof iFrom],
                icon: 'none'
            })
            return
        }
    }

    const res = await saveUserEmailConfigAPI(form)

    uni.showToast({
        title: '邮箱设置成功',
        icon: 'none'
    })
    setTimeout(() => {
        uni.navigateBack()
    }, 1000)
    console.log(form)
}
const showPws = ref(false)

onLoad(async () => {
    const res = await getUserEmailConfigAPI({})

    if (!res.data)
        return nextTick(() => {
            startProcess()
        })
    const { username, password, host, port, id } = res.data

    const pws = decryption(password, import.meta.env.VITE_PWD_ENC_KEY)

    Object.assign(form, {
        username,
        password: pws,
        host,
        port,
        id
    })

    const r = await getRect('.subtitle')
    console.log('r-------------', r)
})

const easyGuide = ref()
const startProcess = () => {
    easyGuide.value.startGuide([
        {
            queryClass: '.Process', // 针对那块元素进行引导
            // canMaskJump: true, // 是否可以通过点击mask遮罩下一步
            imgs: [
                {
                    // imgs 引导图片
                    width: '470rpx', // 图片宽
                    height: '320rpx', // 图片高
                    left: '-234rpx', // 以引导元素左上角定位
                    top: '70rpx', // 以引导元素左上角定位
                    src: getImg('/img/cacUser/startGuide.png'), // 图片连接
                    isNextButton: true,
                    clickEvent: () => {
                        // 点击事件
                        jump('/views/subViews/common/serviceProtocol?type=11')
                        // console.log('clickEvent')
                    }
                }
            ]
        }
    ])
}
</script>

<template>
    <cms-easy-guide ref="easyGuide" />
    <view class="p-[50rpx] box">
        <view class="header flex-between pb-[40rpx]">
            <view class="title text-xl font-bold">邮件设置</view>
            <view class="Process">
                <view
                    class="subtitle flex-center gap-[10rpx]"
                    @click="$jump('/views/subViews/common/serviceProtocol?type=11')"
                >
                    <image
                        style="width: 30rpx; height: 30rpx"
                        :src="$getImg('/img/cacUser/doubt.png')"
                    ></image>
                    邮件客户端设置SMTP</view
                >
            </view>
        </view>

        <view class="list flex-column gap-[30rpx]">
            <view class="item flex-column gap-[20rpx]">
                <view class="label">用户名</view>
                <view class="value">
                    <fui-input
                        inputBorder
                        :padding="['16rpx', '28rpx']"
                        size="28"
                        placeholder="请输入用户名"
                        radius="10"
                        v-model="form.username"
                    >
                        <template #left>
                            <view class="mr-[10rpx]">
                                <fui-icon name="mail" size="40"></fui-icon>
                            </view>
                        </template>
                    </fui-input>
                    <!--                    <input type="text" placeholder="请输入用户名" v-model="form.username" />-->
                </view>
            </view>

            <view class="item flex-column gap-[20rpx]">
                <view class="label">授权码</view>
                <view class="value">
                    <fui-input
                        inputBorder
                        :padding="['16rpx', '28rpx']"
                        size="28"
                        placeholder="请输入密码"
                        radius="10"
                        :type="showPws ? 'text' : 'password'"
                        v-model="form.password"
                    >
                        <template #default>
                            <fui-icon
                                :name="showPws ? 'visible' : 'invisible'"
                                @click="showPws = !showPws"
                                size="40"
                            ></fui-icon>
                        </template>
                    </fui-input>
                    <!--                    <input type="text" placeholder="请输入用户名" v-model="form.username" />-->
                </view>
            </view>

            <view class="item flex-column gap-[20rpx]">
                <view class="label">主机</view>
                <view class="value">
                    <fui-input
                        inputBorder
                        :padding="['16rpx', '28rpx']"
                        size="28"
                        placeholder="请输入主机"
                        radius="10"
                        v-model="form.host"
                    >
                    </fui-input>
                    <!--                    <input type="text" placeholder="请输入用户名" v-model="form.username" />-->
                </view>
            </view>

            <view class="item flex-column gap-[20rpx]">
                <view class="label">端口</view>
                <view class="value">
                    <fui-input
                        inputBorder
                        :padding="['16rpx', '28rpx']"
                        size="28"
                        placeholder="请输入端口"
                        radius="10"
                        v-model="form.port"
                    >
                    </fui-input>
                    <!--                    <input type="text" placeholder="请输入用户名" v-model="form.username" />-->
                </view>
            </view>
        </view>

        <view class="footer pt-[40rpx]">
            <fui-button height="80rpx" type="primary" size="large" radius="999rpx" @click="submit"
                >保存</fui-button
            >
        </view>
    </view>
</template>

<style scoped lang="scss">
.box {
    font-size: 14px;
    color: #333;
    .header {
        color: #333;
        .subtitle {
            color: #376af7;
        }
    }
}
</style>
